window.addEventListener("load", function () {
	//功能1:点击回到顶部时，滚动条到顶部-----------------------------------------------------------
	$(".gun").addEventListener("click", function () {
		window.scrollTo({ left: 0, top: 0, behavior: "smooth" });
	});
	//功能三:API次数tab动态渲染----------------------------------------------------------------------------------

	//1.获取后台数据,对数组进行遍历
	let apidata = [
		{ times: 4000, price: 1200, unitPrice: "0.3000" },
		{ times: 8000, price: 2000, unitPrice: "0.2500" },
		{ times: 40000, price: 8000, unitPrice: "0.2000" },
	];
	//2.遍历时拼接html结构
	//3.将html结构放入指定位置
	apidata.forEach(function (v) {
		$(
			".fouth"
		).innerHTML += `<span data-price=${v.price} data-unitPrice=${v.unitPrice}> ${v.times}次</span>`;
	});
	//给默认的第一个li增加激活样式
	$(".fouth span")[1].classList.add("active");
	//默认显示第一个的价格内容
	$(".last").innerHTML = `<span>¥${$(".fouth span")[1].dataset.price}</span>
	<span>(约${
		$(".fouth span")[1].dataset.unitprice
	}元/次),仅限企业实名购买</span>`;
	//功能一:点击tab区增加激活样式---------------------------------------------------------------------------

	//1.获取相关节点
	$(".fouth span").forEach(function (v) {
		//2.给其绑定点击事件
		v.addEventListener("click", function () {
			if (!this.classList.contains("default")) {
				//3.先排他,将所有激活类都移除
				$(".fouth span").forEach(function (item) {
					item.classList.remove("active");
				});
				//4.再给自己增加激活类样式
				this.classList.add("active");
				//功能二:点击tab按钮,在下方联动生成对应的价格数据----------------------------------------------
				$(".last").innerHTML = `<span>¥${this.dataset.price}</span>
				<span>(约${this.dataset.unitprice}元/次),仅限企业实名购买</span>`;
			}
		});
	});

	//功能四:移入二维码显示,移除消失---------------------------------------------------------------------------------

	$(".fouth .default").addEventListener("mouseover", function () {
		$(".ewm").style.display = "block";
	});
	$(".fouth .default").addEventListener("mouseout", function () {
		$(".ewm").style.display = "none";
	});

	//功能五:点击主体导航栏区增加激活样式--------------------------------------------------------------------------------------
	// $("#contLt div")[0].classList.add("on");
	//1.获取点击事件
	/*	$("#tab li").forEach(function (v, i) {
		//2.给其绑定点击事件
		v.addEventListener("click", function () {
			//3.先排他,将所有激活类都移除
			$("#tab li").forEach(function (item, index) {
				item.classList.remove("active");
				$("#contLt div")[index].classList.remove("on");
			});
			//4.再给自己增加激活类样式
			this.classList.add("active");
			//功能六:点击tab显示对应的内容--------------------------------------------------------------------------------------------------
			//1.获取相关节点
			//2.让所有的卡片内容消失
			//3.点击li通过对应的索引显示对应的卡片内容
			$("#contLt div")[i].classList.add("on");
		});
	});*/
	// 调用测试
	tab("#tab li", "active", "#contLt div", "on");

	//功能:背景图粒子效果--------------------------------------------------------------------------------------------------

	//配置
	const config = {
		selector: "#bannerBg",
		vx: 4, //点x轴速度,正为右，负为左
		vy: 4, //点y轴速度
		height: 2, //点高宽，其实为正方形，所以不宜太大
		width: 2,
		count: 100, //点个数
		color: "#000", //点颜色
		stroke: "0,0,0", //线条颜色
		dist: 6000, //点吸附距离
		e_dist: 20000, //鼠标吸附加速距离
		max_conn: 10, //点到点最大连接数
	};
	//调用
	CanvasParticle(config);
});
